import React, { useState, useRef ,useEffect} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card,Steps } from 'antd';

import {getWelcomeInfo} from "./service.js"

import {
  EditOutlined,
  CloudUploadOutlined,
  FileImageOutlined,
} from '@ant-design/icons';
const { Step } = Steps;

const Welcome= () => {
  const [info,setInfo] = useState({userImageNum: 0, publicImageNum: 0})
  useEffect(()=>{
    getWelcomeInfo().then(res=>{
      if(res.code==0){
        console.log(res)
        setInfo(res.data)
      }
    })
  },[])
  return (
    <PageContainer>
       <div style={{marginBottom:"20px",fontWeight:"bold"}}>新手入门</div>
       <Card style={{marginBottom:"20px"}}>
       <Steps >
    <Step title="选择用户组" icon={<EditOutlined />} />
    <Step title="上传镜像" icon={<CloudUploadOutlined />} />
    <Step title="使用镜像" icon={<FileImageOutlined />}/>
  </Steps>
       </Card>
       
      <div style={{marginBottom:"20px",fontWeight:"bold"}}>资源总览</div>
      
      <div style={{display:"flex"}}  >

      <Card style={{width:"200px"}} title="公共镜像">
     {info.userImageNum}
      </Card>
      <Card style={{width:"200px",marginLeft:"20px"}} title="我的镜像" >
        {info.publicImageNum}
      </Card>
      </div>
      
    </PageContainer>
  );
};

export default Welcome;